<template>
  <div>
    <div class="close" @click="$emit('close')">
      <span class="toutiao toutiao-guanbi"></span>
    </div>
    <!-- 我的频道 -->
    <div class="mycha">
      <div>我的频道</div>
      <van-button
        class="editbtn"
        plain
        type="danger"
        @click="isEdit = !isEdit"
        round
      >
        {{ isEdit ? "完成" : "编辑" }}
      </van-button>
    </div>
    <van-grid :gutter="10">
      <van-grid-item
        class="grid-item"
        :class="{ red: channelActive == index }"
        v-for="(item, index) in userChannels"
        :key="item.id"
        :text="item.name"
        @click="mychannelFn(index)"
      >
        <template #icon v-if="isEdit">
          <van-icon name="clear" class="clearbtn" />
        </template>
      </van-grid-item>
    </van-grid>
    <!-- 频道推荐 -->
    <div class="mycha">
      <div>频道推荐</div>
    </div>
    <van-grid direction="horizontal" :gutter="10">
      <van-grid-item
        class="grid-item"
        v-for="(item, index) in recommendChannels"
        :key="index"
        :text="item.name"
        icon="plus"
        @click="addchannelFn(item)"
      >
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script>
import { allChannelApi, setMyChannelApi } from "@/api/home";
import { setItem } from "@/utils/storage";
export default {
  props: {
    userChannels: Array,
    channelActive: Number,
  },
  data() {
    return {
      allChannel: [],
      isEdit: false, //编辑状态
    };
  },
  methods: {
    mychannelFn(index) {
      if (this.isEdit) {
        //删除操作
        //判断一下当前传入的 是不是第一个 如果是不能删除
        if (this.userChannels[index].id == 0) {
          return false;
        }
        if (index < this.channelActive) {
          this.$emit("ischannel", this.channelActive - 1, true);
        }
        this.userChannels.splice(index, 1);
      } else {
        //  频道的切换
        //1.改变父页面激活状态的索引值
        //2.子向父通信
        //3/别忘了关闭弹层
        this.$emit("ischannel", index, false);
      }
    },
    //添加频道
    addchannelFn(item) {
      this.userChannels.push(item);
    },
  },
  async created() {
    //请求所有频道;
    try {
      let { data } = await allChannelApi();
      this.allChannel = data.data.channels;
      console.log(data);
    } catch (err) {
      console.log(err);
    }
  },
  computed: {
    //推荐频道
    recommendChannels() {
      return this.allChannel.filter((item) => {
        return !this.userChannels.find((it) => {
          //返回符合条件的 it 的元素
          // 如果这俩相等就返回true  但是返回到上层 ！ 就会变成false 所以相等的就不会返回出去
          //也就实现了 所有的频道 - 我的频道 =   推荐频道
          return it.id == item.id;
        });
      });

      // // 所有的频道 - 我的频道
      // return arr;
      //3 个 rutrun 的作用
      //1 利用find 找到重叠的元素 2 利用! 找到不重叠的元素 3 计算属性 需要得到return返回值
    },
  },
  watch: {
    //监听我的频道数据变化
    userChannels: {
      deep: true,
      handler(newVal) {
        console.log(newVal);
        if (this.$store.state.token) {
          //走接口
          let arr = [];
          for (let i = 0; i < newVal.length; i++) {
            let obj = {};
            //处理频道id
            obj.id = newVal[i].id;
            //处理频道索引
            obj.seq = i;
            arr.push(obj);
          }
          // let res = await setMyChannelApi(arr);
          // console.log(res);
          setMyChannelApi(arr);
        } else {
          //走缓存
          setItem("MYCHANNEL", newVal);
        }
      },
    },
  },
};
</script>
<style scoped lang="less">
.close {
  margin: 30px 0px 0px 30px;
  .toutiao {
    font-size: 28px;
    line-height: 28px;
    display: block;
  }
}

.mycha {
  height: 48px;
  margin-top: 40px;
  padding: 0px 24px;
  margin-bottom: 46px;
  div:first-child {
    font-size: 32px;
    line-height: 36px;
    letter-spacing: 2px;
    color: #333333;
    float: left;
  }
  .editbtn {
    height: 48px;
    width: 120px;
    float: right;
    /deep/.van-button__text {
      font-size: 25px;
      color: red;
    }
  }
}
.mt75 {
  margin-top: 75px;
}
.grid-item {
  width: 160px;
  height: 86px;
  /deep/.van-grid-item__content {
    background-color: #f4f5f6;
    .van-grid-item__text {
      font-size: 28px;
      color: #222222;
      margin-left: 6px;
    }
    .van-icon {
      font-size: 24px;
    }
    .van-grid-item__icon-wrapper {
      position: unset;
      .clearbtn {
        position: absolute;
        top: -12px;
        right: -12px;
        z-index: 9;
        color: #cacaca;
      }
    }
  }
}
/deep/.red {
  .van-grid-item__content {
    .van-grid-item__text {
      color: red;
    }
  }
}
</style>
